<template>
  <a-modal v-model:open="open" :width="960"
           :footer="null"
           title="添加分类"
           :keyboard="false"
           :mask-closable="false"
           @cancel="handleClose">
    <a-form
        :model="formState"
        name="basic"
        class="mt20"
        layout="horizontal"
        style="width: 100%;"
        ref="formRef"
        :rules="rules"
        :label-col=" { style: { width: '150px' } }"
        :wrapper-col="{ span: 24}"
        autocomplete="off"
    >
      <a-row class="flex justify-center">
        <a-col :span="12">
          <a-form-item
              label="分类名称"
              name="name"
          >
            <a-input v-model:value="formState.name" placeholder="请输入分类名称"/>
          </a-form-item>
          <a-form-item
              label="分类编号"
              name="code"
          >
            <a-input v-model:value="formState.code" placeholder="请输入分类编号"/>
          </a-form-item>
          <a-form-item
              label="分类排序"
              name="code"
          >
            <a-input v-model:value="formState.sorted" placeholder="请输入分类排序"/>
          </a-form-item>
          <a-form-item
              label="状态"
              name="status"
          >
            <a-switch v-model:checked="formState.status"
                      :checked-value="1"
                      :un-checked-value="0"
                      checked-children="已上架"
                      un-checked-children="已下架"/>
          </a-form-item>
          <a-form-item>
            <a-button style="margin-left: 150px" type="primary" @click.stop.prevent="onSubmit">
              {{ formState.id ? '更新分类' : '保存分类' }}
            </a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>
<script setup>
const open = ref(false);
const formRef = ref({})
const emits = defineEmits(["success"])
const formState = ref({
  name: "",
  code: '',
  sorted: 1,
  status:1
});

// 验证规则
const rules = {
  name: [
    {required: true, message: '请输入分类名称', trigger: 'change'},
    {min: 2, max: 30, message: '长度2到30位', trigger: 'blur'},
  ]
};

const onSubmit = async () => {
  try {
    await formRef.value.validate()
    if (formState.value.id) {
      formState.value.id = formState.value.id * 1
      await useUpdateShopsCategory(formState.value)
    } else {
      await useSaveShopsCategory(formState.value)
    }
    useMessage().success("操作成功")
    handleClose()
    emits("success")
  } catch (e) {

  }
};


const handleOpen = async (opid,sorted) => {
  open.value = true
  if (opid) {
    formState.value.id = opid * 1;
    formState.value.sorted = sorted + 1
    const res = await useGetShopsCategoryById(opid)
    formState.value = {...res.data}
  }else{
    formState.value.sorted = sorted + 1
  }
}

const handleClose = () => {
  formState.value = {
    name: "",
    code: '',
    status:1,
    sorted:1
  }
  open.value = false
}

defineExpose({
  handleOpen
})
</script>

<style lang="scss" scoped>
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    overflow: auto;
    border-radius: 0px;
  }

  :where(.css-dev-only-do-not-override-1hsjdkk).ant-modal .ant-modal-header {
    background: transparent;
  }

  .ant-modal-body {
    flex: 1;
  }
}
</style>